<template>
  <div>
    <el-carousel :height="imgHeight+'px'"  trigger="click">
      <el-carousel-item v-for="(item,index) in bannerList" :key="index">
        <img ref="image" style="width:100%;" :src="$api.picPre + item.pic" alt="">
      </el-carousel-item>
    </el-carousel>
    <section>
      <div class="allTitle">
        <p class="CnTitle">公司概况</p>
        <p class="EnTitle">COMPANY  PROFILE</p>
      </div>
      <div class="company">
        <div class="block"></div>
        <div class="commonWrapper type1">
          <img src="@/assets/img/company1.png" alt="">
          <div>
            <h2>企业简介<span>Enterprise profile</span></h2>
            <p>
              她永远是他这一生的例外，也永远是他这一生不可及的天涯。一心所系，一路追逐，宣告着她是自己的，却一路看着她渐行渐远。他仰首，看着晶莹雪山之前的孟扶摇，她比雪山更晶莹，她本就是生于雪山土壤之中的绝世之莲，行行重行行一路踏血前进，只为最终的回归。
            </p>
            <p>而他，在天意的撰写中，注定做了她一生里浓墨重彩，却停在半途的一笔。这一生我爱着爱别人的你，这一生我为你做着虚幻的戏，将自己活成南辕北辙的叠影下一世我再不要遇见，不要再遇见这般的苦。</p>
          <div class="btn">
            <img src="@/assets/img/more.png" alt="">
          </div>
          </div>
        </div>
        <div class="commonWrapper type2">
          <div>
            <h2>企业文化 <span>Corporate culture</span></h2>
            <div>
              <div class="title">企业文化</div>
              <p>我要你记得，有些错误，就像你刚才的那道伤口，一开始什么都发现不了，时间久了，便要.... </p>
            </div>
            <div>
              <div class="title">企业文化</div>
              <p>我要你记得，有些错误，就像你刚才的那道伤口，一开始什么都发现不了，时间久了，便要.... </p>
            </div><div>
            <div class="title">企业文化</div>
            <p>我要你记得，有些错误，就像你刚才的那道伤口，一开始什么都发现不了，时间久了，便要.... </p>
          </div><div>
            <div class="title">企业文化</div>
            <p>我要你记得，有些错误，就像你刚才的那道伤口，一开始什么都发现不了，时间久了，便要.... </p>
          </div>
          </div>
          <img src="@/assets/img/company2.png" alt="">
        </div>
      </div>
    </section>
    <section class="team">
      <div class="allTitle">
        <p class="CnTitle">团队介绍</p>
        <p class="EnTitle">TEAM  INTRODUCTION</p>
      </div>
      <div class="commonWrapper">
        <p style="padding: 0 167px; text-align: center">忽然起了狂风，将风灯卷起，砰砰敲在院墙上，那光影急速晃动像无数蹑足在黑夜中窥视的鬼影。既然注定如此，且让你飞得更高，与其看你在执念折磨下挣扎苦痛一生，不如助你，冲破青天。自从遇见你，我的人生便只剩下了马不停蹄。</p>
        <div class="content">
          <div class="bg">
            <h2>人物简介</h2>
          </div>
          <el-carousel interval="5000" indicator-position="outside" class="team-wrapper" height="487px"  trigger="click">
            <el-carousel-item v-for="(item, index) in teamList" :key="index">
              <el-row :gutter="90">
                <el-col :span="8" v-for="(n, i) in item" :key="i" >
                  <img :src="$api.picPre + n.pic" alt="">
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </section>
    <section class="video">
      <div class="allTitle">
        <p class="CnTitle">视频中心</p>
        <p class="EnTitle">VIDEO  CENTER</p>
      </div>
      <div class="commonWrapper">
        <el-row >
          <el-col :span="8" v-for="(item, index) in videoList" :key="index" >
            <el-card :body-style="{ padding: '0px' }">
              <div class="video-card-main">
                <div class="video-card-img" @click="videoBtn(item.title,item.video)">
                  <img :src="$api.picPre + item.pic" class="image">
                  <div>
                    <img src="@/assets/img/playImg.png" alt="">
                  </div>
                </div>
                <div class="video-card-content">
                  <h1>{{item.title}}</h1>
                  <p>{{item.intro}}</p>
                </div>
                <p></p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </section>
    <section>
      <div class="allTitle">
        <p class="CnTitle">公司项目</p>
        <p class="EnTitle">CONMPANY  PROJECT</p>
      </div>
      <div class="commonWrapper">
        <el-carousel interval="5000" indicator-position="outside" class="team-wrapper" height="532px"  trigger="click">
          <el-carousel-item v-for="(item, index) in projectList" :key="index">
            <div class="project">
              <div class="left">
                <h2>{{item.project_name}}</h2>
                <div class="item">
                  <div class="title">{{item.character1}}</div>
                  <p>{{item.character1_info}}</p>
                </div>
                <div class="item">
                  <div class="title">{{item.character2}}</div>
                  <p>{{item.character2_info}}</p>
                </div>
                <div class="item">
                  <div class="title">{{item.character3}}</div>
                  <p>{{item.character3_info}}</p>
                </div>
                <div class="item">
                  <div class="title">{{item.character4}}</div>
                  <p>{{item.character4_info}}</p>
                </div>
              </div>
              <div class="right">
                <div class="line"></div>
                <img :src="$api.picPre + item.pic">
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </section>
    <section>
      <div class="allTitle">
        <p class="CnTitle">行业资讯</p>
        <p class="EnTitle">INDUSTRY  CONSULTANCY</p>
      </div>
      <div class="home-news">
        <div class="home-news-left" @click="toNews(newsOne.id)">
          <img :src="$api.picPre + newsOne.pic" alt="">
          <div class="home-news-left-days">
            <p>{{newsOne.days}}</p>
            <p>{{newsOne.years}}</p>
          </div>
          <div class="home-news-left-title">
            <p>【{{newsOne.section}}】{{newsOne.title}}</p>
            <p>{{newsOne.simple}}</p>
          </div>
        </div>
        <div>
          <div class="home-news-right" v-for="(item,index) in newsList" :key="index" @click="toNews(item.id)">
            <div class="home-news-right-days">
              <p>{{item.days}}</p>
              <p>{{item.years}}</p>
            </div>
            <div class="home-news-right-title">
              <p>【{{item.section}}】{{item.title}}</p>
              <p>{{item.simple}}</p>
            </div>
          </div>
          <img src="@/assets/img/more.png" alt="">
        </div>
        </div>
    </section>
    <el-dialog :title="videoTitle"  :visible.sync="videoShow">
      <video :src="$api.picPre + videoSrc" controls="controls" width="100%"></video>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      bannerList: [],
      videoList: [],
      teamList: [],
      projectList: [],
      imgHeight: '300',
      videoShow: false,
      videoSrc: '',
      videoTitle: '',
      newsOne: {},
      newsList: []
    }
  },
  methods: {
    toNews (id) {
      this.$router.push({
        name: 'newsDetails',
        params: { id: id }
      })
    },
    imgLoad () {
      this.$nextTick(function () {
        // 获取窗口宽度*图片的比例，定义页面初始的轮播图高度
        this.imgHeight = document.body.clientWidth * 797 / 1920
      })
    },
    videoBtn (title, src) {
      this.videoShow = true
      this.videoSrc = src
      this.videoTitle = title
    },
    getBanner () {
      this.$ajax
        .get(this.$api.videoList)
        .then(res => {
          this.bannerList = res.data
          this.imgLoad()
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'warning'
          })
        })
    },
    getVideoList () {
      this.$ajax
        .get(this.$api.videoList, {
          page_size: 3,
          page: 1
        })
        .then(res => {
          this.videoList = res.data
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'warning'
          })
        })
    },
    getTeamList () {
      this.$ajax
        .get(this.$api.getTeamList, {
          page_size: 100,
          page: 1
        })
        .then(res => {
          var result = []
          var chunk = 3

          for (var i = 0, j = res.data.length; i < j; i += chunk) {
            result.push(res.data.slice(i, i + chunk))
          }
          this.teamList = result
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'warning'
          })
        })
    },
    getProjectList () {
      this.$ajax
        .get(this.$api.getProjectList, {
          page_size: 300,
          page: 1
        })
        .then(res => {
          this.projectList = res.data
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'warning'
          })
        })
    },
    getNewsList () {
      this.$ajax
        .get(this.$api.infoList, {
          page_size: 4,
          page: 1
        })
        .then(res => {
          for (let item of res.data) {
            item.create_time = item.create_time.split(' ')[0].split('-')
            item.years = item.create_time[0] + '-' + item.create_time[1]
            item.days = item.create_time[2]
          }
          this.newsList = res.data
          this.newsOne = this.newsList.shift()
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'warning'
          })
        })
    }
  },
  created () {
    this.getTeamList()
    this.getBanner()
    this.getVideoList()
    this.getProjectList()
    this.getNewsList()
  },
  mounted () {
    window.addEventListener('resize', () => {
      this.imgHeight = this.$refs.image[0].height
    })
  }
}
</script>

<style scoped lang="scss">
  .company{
    position: relative;
    .block{
      z-index: 1;
      position: absolute;
      left: 0;
      top:11px;
      width:893px;
      height:523px;
      background:rgba(246,246,246,1)
    }
    .type1{
      z-index: 10;
      position: relative;
      @include flex_content;
      @include flex_justify_space;
      @include flex_align_center;
      >img{
        margin-right: 94px;
        width: 560px;
      }
      h2{
        font-size:20px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(146,40,42,1);
        line-height:102px;
        span{
          display: inline-block;
          margin-left: 46px;
        }
      }
      p{
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(85,85,85,1);
        line-height:30px;
        margin-bottom: 40px;
      }
      .btn{
        img{
          width: 81px;
        }
      }
    }
    .type2{
      margin-top: 123px;
      z-index: 10;
      position: relative;
      @include flex_content;
      @include flex_justify_space;
      @include flex_align_center;
      >img{
        margin-left: 94px;
        width: 460px;
      }
      h2{
        font-size:20px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(146,40,42,1);
        line-height:102px;
        span{
          display: inline-block;
          margin-left: 46px;
        }
      }
      .title{
        font-size:20px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(2,8,11,1);
        line-height:41px;
      }
      p{
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(85,85,85,1);
        line-height:30px;
        margin-bottom: 40px;
      }
      .btn{
        img{
          width: 81px;
        }
      }
    }
  }
  .team{
    .commonWrapper{
      p{
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(85,85,85,1);
        margin-bottom: 70px;
      }
      .content{
        position: relative;
        height:598px;
        margin-bottom: 126px;
        .bg{
          position: absolute;
          top: 0;
          left: 0;
          width:294px;
          height:598px;
          background:rgba(146,40,42,1);
          h2{
            padding: 52px 0 0 71px;
            font-size:24px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color:rgba(255,255,255,1);
          }
        }
        .team-wrapper{
          padding: 100px 0 0 71px;
          img{
            width: 346px;
          }
        }
      }
    }
  }
.video{
  background:rgba(246,247,249,1);
}
  .project{
    @include flex_content;
    @include flex_justify_space;
    @include flex_align_center;
    height: 532px;
    .left{
      margin-right: 73px;
      h2{
        font-size:24px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(27,31,42,1);
        line-height:50px;
      }
      .title{
        font-size:18px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(146,40,42,1);
        line-height:40px;
        &:before{
          content: '•';
          width:8px;
          height:8px;
          margin-right: 10px;
          color:rgba(146,40,42,1);
          border-radius:50%;
        }
      }
      p{
        font-size:14px;
        margin-left: 18px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(85,85,85,1);
        line-height: 20px;
      }
      .item{
        margin: 20px 0 ;
      }
    }
    .right{
      width: 389px;
      height: 532px;
      text-align: left;
      position: relative;
      .line{
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        width:348px;
        height:516px;
        border: 4px solid rgba(146,40,42,1);
      }
      img{
        position: relative;
        z-index: 10;
        width: 350px;
        margin: 32px 39px 0 0;
      }
    }
  }
  .home-news{
    width: 1200px;
    margin-bottom: 139px;
    margin-left: auto;
    margin-right: auto;
    @include flex_content();
    .home-news-left{
      cursor: pointer;
      width: 606px;
      height: 404px;
      position: relative;
      margin-right: 96px;
      img{
        width: 606px;
        height: 404px;
      }
      .home-news-left-days{
        width: 74px;
        height: 74px;
        background-color: #92282A;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        p:first-child{
          font-size: 40px;
          color: #FFFFFF;
          margin-top: 12px;
        }
        p:last-child{
          font-size: 14px;
          color: #FFFFFF;
        }
      }
      .home-news-left-title{
        width: 100%;
        height: 92px;
        position: absolute;
        bottom: 0;
        background:rgba(32,32,32,0.3);
        p:first-child{
          font-size: 18px;
          color: #FFFFFF;
          font-weight:bold;
          margin: 24px 0 24px 16px;
        }
        p:last-child{
          font-size: 14px;
          color: #FFFFFF;
          margin-left: 24px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
    }
    .home-news-right:hover{
      .home-news-right-days{
        color: #92282A;
      }
    }
    .home-news-right{
      @include flex_content();
      margin-bottom: 50px;
      .home-news-right-days{
        width: 70px;
        text-align: center;
        color: #A8A8A8;
        p:first-child{
          font-size: 40px;
        }
        p:last-child{
          font-size: 14px;
        }
      }
      .home-news-right-title{
        cursor: pointer;
        flex: 1;
        p:first-child{
          font-size: 18px;
          color: #333333;
          font-weight:bold;
          margin-bottom: 14px;
          margin-left: 14px;
        }
        p:last-child{
          font-size: 14px;
          color: #969696;
          line-height: 23px;
          margin-left: 22px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
</style>
